<template>
  <div id="mapp">
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" id="hotMap">
      </baidu-map>
      <div class="mapshadow"></div>
      <ul class="dialog" v-show="isShow">
        
        <li>
          <span>用户:</span>
          <span>{{userName}}</span>
        </li>
        <li>
          <span>日期:</span>
          <span>{{date}}</span>
        </li>
        <li>
          <span>事件:</span>
          <span>{{event}}</span>
        </li>
        <li>
          <span>河流:</span>
          <span>{{river}}</span>
        </li>
        <li>
            <span>地址:</span>
            <span>{{address}}</span>
          </li>
      </ul>
      <img src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow//img/title.png" id="title">
      <!-- <img src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow//img/map.png" id="title2"> -->
  </div>
</template>
<script>
import axios from 'axios'
import Heatmap from "heatmap.js";
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
export default {
  name:"mapp",
  data () {
    return {
      center: {lng: 0, lat: 0},  //经纬度
      zoom: 16,　 //地图展示级别,
      BMap:'',
      map:'',
      size:{
        width:100,
        height:100,
      },
      xZhou:119.854545,
      yZhou:31.369006,
      date:"00:00:00",
      event:"",
      userName:"",
      river:"",
      address:"",
      isShow:false,
      point:[],
    }
  },
　　components: {
　　　　BaiduMap  //指定组件模板
　　},
  created(){
    var that = this;
    that.getData();
    //that.getHot();
    setInterval(that.getData,20000)
  },
  methods: {
    // getHot(){
    //   var that = this;
    //   axios.get("index.php?g=api&m=index&a=getHot")
    //   .then(function(res){
    //     var data = res.data.content;
    //     that.point = res.data.content;
    //   })
    // },
    getData(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=seachnewdata")
      .then(function(res){
        var data = res.data.content[0];
        console.log(data,66666000)
        that.xZhou=Number(data.longitude);
        that.yZhou=Number(data.latitude);
        that.date=data.add_time;
        that.event=data.event_name;
        that.userName=data.uid;
        that.river=data.rivers;
        that.address=data.address;
        that.isShow = true;
          setTimeout(function(){
            that.isShow = false;
          },5000)
      })
    },
    handler ({BMap, map}) {
      //console.log(BMap, map)
      var that = this;
      var point = new BMap.Point(that.xZhou, that.yZhou);    
      map.centerAndZoom(point,15);
      // var heatmapInstance = Heatmap.create({
      //     container: document.getElementById('hotMap')
      // })
      // var points = that.point;
      // var max = 100;
      // var data = {
      //   max: max,
      //   data: points
      // }
      // heatmapInstance.setData(data)
      // console.log(BMapLib,11112222)
      // heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":100,"visible":true});
      // map.addOverlay(heatmapOverlay);
      // heatmapOverlay.setDataSet({data:points,max:100});
      // heatmapOverlay.show();
      var marker = new BMap.Marker(point);        // 创建标注    
      map.addOverlay(marker);                     // 将标注添加到地图中 
      map.addControl(new BMap.ScaleControl());    
      map.addControl(new BMap.OverviewMapControl());
      map.enableScrollWheelZoom(true);
      map.setMapStyle({style:'midnight'});
      marker.addEventListener("click", function(){    
          alert("您好");    
      });
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #mapp{
        width:100%;
        height:49vh;
        padding-top:9.7vh;
        position:relative;
        position:relative;
    }
    .map {
      width: 100%;
      height: 100%;
      /* background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/weather.png); */
      background-image: url(../assets/img/shadow.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .mapshadow{
      background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/shadow.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: calc(100% - 5vh);
      position:absolute;
      top:5vh;
      left:0;
    }
    /deep/ .anchorBL{
      display:none;
    }
    #title{
      position:absolute;
      width:100%;
      left:0;
      top:0;
    }
    #title2{
      position:absolute;
      width:100%;
      left:0;
      bottom:0;
    }
    .dialog{
      background-color:rgba(0,0,0,.5);
      position:absolute;
      z-index:999;
      color:#FFF;
      font-size:0.2rem;
      top:50%;
      left:1.5vw;
      line-height:2vw;
      padding:1.8vh 1vw;
      transform: translateY(-50%)
    }
    .dialog li span:first-child{
      width:3.1vw;
      display:inline-block;
      text-align: right;
    }
    .dialog li span:last-child{
      padding-left:0.5vw;
    }
</style>